<!DOCTYPE html>
<html>

<head lang='zh'>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=0"/>
    <title>Luckysheet</title>

    <link rel='stylesheet' href='./plugins/css/pluginsCss.css'/>
    <link rel='stylesheet' href='./plugins/plugins.css'/>
    <link rel='stylesheet' href='./css/luckysheet.css'/>
    <link rel='stylesheet' href='./assets/iconfont/iconfont.css'/>
    <script src="./plugins/js/plugin.js"></script>

    <!-- rollup luckysheet.js -->
    <script src="./luckysheet.umd.js"></script>
    <style>
        #luckysheet-export-wordTemplate table tr td {
            border: 1px solid #ddd;
        }
    </style>
</head>

<body>
<button id="export4" type="button"
        style="z-index:6;width:50px;height:50px;line-height:50px;position:fixed;right:440px;top:160px;cursor:pointer;background:rgb(71,133,249);text-align:center;text-decoration:none;">
    粘贴
</button>
<button id="export3" type="button"
        style="z-index:6;width:50px;height:50px;line-height:50px;position:fixed;right:340px;top:160px;cursor:pointer;background:rgb(71,133,249);text-align:center;text-decoration:none;">
    剪切
</button>
<button id="export2" type="button"
        style="z-index:6;width:50px;height:50px;line-height:50px;position:fixed;right:240px;top:160px;cursor:pointer;background:rgb(71,133,249);text-align:center;text-decoration:none;">
    清空
</button>
<button id="export1" type="button"
        style="z-index:6;width:50px;height:50px;line-height:50px;position:fixed;right:140px;top:160px;cursor:pointer;background:rgb(71,133,249);text-align:center;text-decoration:none;">
    取消
</button>
<button id="export" type="button"
        style="z-index:5;width:50px;height:50px;line-height:50px;position:fixed;right:40px;top:86px;cursor:pointer;background:rgb(71,133,249);text-align:center;text-decoration:none;">
    导出
</button>
<div id="luckysheet" style="margin:0px;padding:0px;position:absolute;width:100%;height:100%;left: 0px;top: 0;"></div>
<!-- demo feature, non-production use -->
<script src="./demoData/demoFeature.js"></script>
<script src="./demoData/sheetFormula.js"></script>
<script src="./demoData/sheetCell.js"></script>
<script src="./demoData/sheetConditionFormat.js"></script>
<script src="./demoData/sheetTable.js"></script>
<script src="./demoData/sheetComment.js"></script>
<script src="./demoData/sheetPivotTableData.js"></script>
<script src="./demoData/sheetPivotTable.js"></script>
<script src="./demoData/sheetSparkline.js"></script>
<script src="./demoData/sheetChart.js"></script>
<script src="./demoData/sheetPicture.js"></script>
<script src="./demoData/sheetDataVerification.js"></script>
<script src="./demoData/FileSaver.js" defer></script>
<script src="./demoData/html-docx.js" defer></script>
<script src="./demoData/jquery.wordexport.js" defer></script>

<script>
	// import sheetFormula from './demoData/sheetFormula.js'
	// import sheetCell from './demoData/sheetCell.js'
	// import sheetConditionFormat from './demoData/sheetConditionFormat.js'
	// import sheetTable from './demoData/sheetTable.js'
	// import sheetComment from './demoData/sheetComment.js'
	// import sheetPivotTableData from './demoData/sheetPivotTableData.js'
	// import sheetPivotTable from './demoData/sheetPivotTable.js'
	// import sheetSparkline from './demoData/sheetSparkline.js'
	// import sheetChart from './demoData/sheetChart.js'
	// import sheetPicture from './demoData/sheetPicture.js'
	// import sheetDataVerification from './demoData/sheetDataVerification.js'


	// import {exportWord} from "./global/api";

	$(function () {

		// According to the browser language
		var lang = luckysheetDemoUtil.language() === 'zh' ? 'zh' : 'en';
		var isShare = luckysheetDemoUtil.getRequest().share; // '?share=1' opens the collaborative editing mode
		var gridKey = luckysheetDemoUtil.getRequest().gridKey; // workbook id for collaborative editing, or directly define here
		var options = null;

		if (isShare || gridKey) {
			// http://localhost:3000/?gridKey=12eyy789-kk45ofid-23737245
			if (!gridKey) {
				alert('If gridKey is not provided in the address bar, please add it in the source code')
			}
			options = {
				container: "luckysheet",
				lang: lang,
				allowUpdate: false,
				updateImageUrl: location.origin + "/luckysheet/api/updateImg",
				updateUrl: "ws://" + location.host + "/luckysheet/websocket/luckysheet",
				gridKey: gridKey,
				loadUrl: location.origin + "/luckysheet/api/load",
				loadSheetUrl: location.origin + "/luckysheet/api/loadsheet"
			}
		} else {
			// http://localhost:3000/


			options = {
				allowUpdate: false,
				viewshow: false,
				showinfobar: false,
				showtoolbar: true,
				// showstatisticBar: false,
				sheetFormulaBar: false,
				showsheetbarConfig: {add: false},
				container: 'luckysheet',
				lang: lang,
				forceCalculation: false,
				plugins: ['chart'],
				fontList: [
					{
						"fontName": "HanaleiFill",
						"url": "./assets/iconfont/HanaleiFill-Regular.ttf"
					},
					{
						"fontName": "Anton",
						"url": "./assets/iconfont/Anton-Regular.ttf"
					},
					{
						"fontName": "Pacifico",
						"url": "./assets/iconfont/Pacifico-Regular.ttf"
					}
				],
				// rowHeaderWidth:0,
				// columnHeaderHeight:0,
				cellRightClickConfig: {
					copy: false, // copy
					copyAs: false, // copy as
					paste: false, // paste
					insertRow: true, // insert row
					insertColumn: true, // insert column
					deleteRow: true, // delete the selected row
					deleteColumn: true, // delete the selected column
					deleteCell: false, // delete cell
					hideRow: false, // hide the selected row and display the selected row
					hideColumn: false, // hide the selected column and display the selected column
					rowHeight: false, // row height
					columnWidth: false, // column width
					// clear: false, // clear content
					// matrix: false, // matrix operation selection
					// sort: false, // sort selection
					// filter: false, // filter selection
					// chart: false, // chart generation
					// image: false, // insert picture
					// link: false, // insert link
					// data: false, // data verification
					// cellFormat: true, // Set cell format
					asTable: true, // Set cell format
					pager: false, // Set cell format
					asTextTable: true, // Set cell format
					addChart: true, // Set cell format
				},
                showtoolbarConfig: {
								// undoRedo: false, //撤销重做，注意撤消重做是两个按钮，由这一个配置决定显示还是隐藏
								// paintFormat: false, //格式刷
								// currencyFormat: false, //货币格式
								// percentageFormat: false, //百分比格式
								// numberDecrease: false, // '减少小数位数'
								// numberIncrease: false, // '增加小数位数
								// moreFormats: false, // '更多格式'
								// font: false, // '字体'
								// fontSize: false, // '字号大小'
								// bold: false, // '粗体 (Ctrl+B)'
								// italic: false, // '斜体 (Ctrl+I)'
								// strikethrough: false, // '删除线 (Alt+Shift+5)'
								// underline: false, // '下划线 (Alt+Shift+6)'
								// textColor: false, // '文本颜色'
								// fillColor: false, // '单元格颜色'
								// border: false, // '边框'
								// mergeCell: false, // '合并单元格'
								// horizontalAlignMode: false, // '水平对齐方式'
								// verticalAlignMode: false, // '垂直对齐方式'
								// textWrapMode: false, // '换行方式'
								// textRotateMode: false, // '文本旋转方式'
								// image: false, // '插入图片'
								// link: false, // '插入链接'
								// chart: false, // '图表'（图标隐藏，但是如果配置了chart插件，右击仍然可以新建图表）
								// postil: false, //'批注'
								// pivotTable: false,  //'数据透视表'
								// function: false, // '公式'
								// frozenMode: false, // '冻结方式'
								// sortAndFilter: false, // '排序和筛选'
								// conditionalFormat: false, // '条件格式'
								// dataVerification: false, // '数据验证'
								// splitColumn: false, // '分列'
								// screenshot: false, // '截图'
								// findAndReplace: false, // '查找替换'
								// protection: false, // '工作表保护'
								// // print: false, // '打印'
							},
				hook: {
					cellMergeAfter:function (cell) {
						luckysheet.setCellValue(cell.r,cell.c,{bg:cell.bg})
					},
          //todo：阻止删除选中行列
					beforeDeleteRowOrColumn(type,st,ed){

						return false;
					},
					afterDeleteRowOrColumn(type, st, ed,file)
					{

					},
					afterInsertRowOrColumn(type, index, value,file,direction){

					},
									addColumns(sheetFile){

                                    },
					addSheetChart: function (select, sheetFile, id) {

					},
					addSheetPage(select,sheetFile,type){

          },
					setSheetTable: function (select, sheetFile, type) {
						//
						// $('#luckysheet-rightclick-menu').hide();
					},
					cellDragStop: function (cell, postion, sheetFile, ctx, event) {
						// console.info(cell, postion, sheetFile, ctx, event);
					},
					rowTitleCellRenderBefore: function (rowNum, postion, ctx) {
						//
						// return false;
					},
					rowTitleCellRenderAfter: function (rowNum, postion, ctx) {
						//
					},
					columnTitleCellRenderBefore: function (columnAbc, postion, ctx) {
						//
						// return false;
					},
					columnTitleCellRenderAfter: function (columnAbc, postion, ctx) {
						//
					},
					cellRenderBefore: function (cell, postion, sheetFile, ctx) {
						//
					},
					cellRenderAfter: function (cell, postion, sheetFile, ctx) {
						//
					},

					cellMousedownBefore: function (cell, postion, sheetFile, ctx) {

						let row=[1,3],column=[2,5];
						//  if
						for (let i = row[0]; i <= row[1]; i++) {
							for (let j = column[0]; j <= column[1]; j++) {
								//
								if (postion.c===j && postion.r===i){
									return false;
								}
							}
						}
						// if (postion.c===1 && postion.r===0){
						// 	return false;
						// }
					},
					cellMousedown: function (cell, postion, sheetFile, ctx, right) {
						//

					},
					sheetMousemove: function (cell, postion, sheetFile, moveState, ctx) {
						//
					},
					sheetMouseup: function (cell, postion, sheetFile, moveState, ctx) {
						//
					},
					cellAllRenderBefore: function (data, sheetFile, ctx) {
						// console.info(data,sheetFile,ctx)
					},
					updated: function (operate) {
						// console.info(operate)
					},
					cellUpdateBefore: function (r, c, value, isRefresh) {
						// console.info('cellUpdateBefore',r,c,value,isRefresh)
					},
					cellUpdated: function (r, c, oldValue, newValue, isRefresh) {
						// console.info('cellUpdated',r,c,oldValue, newValue, isRefresh)
					},
					sheetActivate: function (index, isPivotInitial, isNewSheet) {
						// console.info(index, isPivotInitial, isNewSheet)
					},
					rangeSelect: function (index, sheet) {
						// console.info(sheet)
					},
					commentInsertBefore: function (r, c) {
						// console.info(r, c)
					},
					commentInsertAfter: function (r, c, cell) {
						// console.info(r, c, cell)
					},
					commentDeleteBefore: function (r, c, cell) {
						// console.info(r, c, cell)
					},
					commentDeleteAfter: function (r, c, cell) {
						// console.info(r, c, cell)
					},
					commentUpdateBefore: function (r, c, value) {
						// console.info(r, c, value)
					},
					commentUpdateAfter: function (r, c, oldCell, newCell) {
						// console.info(r, c, oldCell, newCell)
					},
					cellEditBefore: function (range) {
						// console.info(range)
					},
					workbookCreateAfter: function (json) {
						// console.info("workbookCreateAfter:" + json)
					},
					rangePasteBefore: function (range, data) {
						// console.info('rangePasteBefore',range,data)
						// return false; //Can intercept paste
					},


				},
				data: [
					sheetCell,
					sheetFormula,
					sheetConditionFormat,
					sheetSparkline,
					sheetTable,
					sheetComment,
					sheetPivotTableData,
					sheetPivotTable,
					sheetChart,
					sheetPicture,
					sheetDataVerification
				]

			}
		}
		options.loading = {
			image: () => {
				return `<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none"></circle>
					</svg>`
			},
			imageClass: "loadingAnimation"
		}
		luckysheet.create(options);
		let images=[
			{
				src:""
			  ,style:'height: 319px; width: 1075px; top: 180px; left: 202px; z-index: 10003;position:absolute;'
			}
		];
		//todo:导出功能
		$("#export").click(function () {
		    //todo:看方法里面的参数
					luckysheet.exportWord("abc",images,90,12);
		});
		$("#export1").click(function () {
			let range1 = {
				row: [7, 9],
				column: [8, 9]
			};
			luckysheet.setTableBlockHide(range1);
		});
		$("#export2").click(function () {
			luckysheet.setTableBlockEmpty();
		});
		$("#export3").click(function () {
			// 先设置选区
			let range1 = {
				row: [7, 8],
				column: [8, 9]
			}
			luckysheet.setRangeShow([range1]);
		});
		$("#export4").click(() => {
			let range1 = {
				row: [7, 8],
				column: [8, 9]
			}
			let range2 = {
				row: [21, 21],
				column: [8, 8]
			}

			luckysheet.moveRange([range1], [range2]);
		});
	})

	//模拟键盘左右键
	function copyAndPaste(value) {
		navigator.clipboard.writeText(value)
			.then(() => {

				// Success!
				document.execCommand("Paste");
			})
			.catch(err => {

			})
	}
</script>
<style>
    /* 自定义loading演示样式 */
    @keyframes loading-rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes loading-dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -40px;
        }

        100% {
            stroke-dasharray: 90, 150;
            stroke-dashoffset: -120px;
        }
    }

    .loadingAnimation {
        width: 3em;
        height: 3em;
        animation: loading-rotate 2s linear infinite;
    }

    .loadingAnimation circle {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke-width: 2;
        stroke: currentColor;
        stroke-linecap: round;
    }
</style>
</body>

</html>
